<template>
	<view>
		<view class="content" v-if="requestStatus">
			<view class="top">
				<view class="pic">
					<swiper class="swiper" :indicator-dots="true" :autoplay="true">
						<swiper-item v-for="(item,index) in userInfoIntro.imgList" :key="index">
							<image :src="item" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
				<!-- 个人信息 -->
				<view class="info">
					<view class="left fl">
						<!-- 姓名 -->
						<view class="name">
							{{userInfoIntro.nickName}}
						</view>
						<image :src="userInfoIntro.sex == '女'?womenImg:manImg" mode=""></image>
					</view>
					<view class="right fr">
						<!-- 位置 -->
						<view class="location">
							{{userInfoIntro.redidence}}
						</view>
					</view>
				</view>
			</view>
			<view class="middle">
				<view class="item">
					<view class="title">
						个人资料
					</view>
					<view class="content">
						<view class="item" v-if="userInfoIntro.wedding">
							{{userInfoIntro.wedding}}
						</view>
						<view class="item" v-if="userInfoIntro.age>=0">
							{{userInfoIntro.age}}岁
						</view>
						<view class="item" v-if="userInfoIntro.height">
							{{userInfoIntro.height}}cm
						</view>
						<view class="item" v-if="userInfoIntro.money">
							月薪：{{userInfoIntro.money}}
						</view>
						<view class="item" v-if="userInfoIntro.isCar">
							{{userInfoIntro.isCar == '是'?'有车':'未购车'}}
						</view>
						<view class="item" v-if="userInfoIntro.isHouse">
							{{userInfoIntro.isHouse == '是'?'有房':'未购房'}}
						</view>
						<view class="item" v-if="userInfoIntro.address">
							籍贯：{{userInfoIntro.address}}
						</view>
						<view class="item" v-if="userInfoIntro.education">
							{{userInfoIntro.education}}
						</view>
						<view class="item" v-if="userInfoIntro.department">
							部门：{{userInfoIntro.department}}
						</view>
						<view class="item" v-if="userInfoIntro.position">
							职位：{{userInfoIntro.position}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">
						我的介绍
					</view>
					<view class="content">
						<view class="intro">
							{{userInfoIntro.intro}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">
						兴趣爱好
					</view>
					<view class="content">
						<view class="intro">
							{{userInfoIntro.hobby}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">
						感情观
					</view>
					<view class="content">
						<view class="intro">
							{{userInfoIntro.emotional}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">
						心怡的Ta
					</view>
					<view class="content">
						<view class="intro">
							{{userInfoIntro.demand}}
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<button type="default" @click="isRegisterStatus?goChat:alert=true">聊天</button>
			</view>
			<view class="like" @click='goLike(userInfoIntro.user_id)'>
				<image :src="userInfoIntro.likeme?like:nolike" mode=""></image>
			</view>
			<view class="alert" v-if="alert">
				<view class="box">
					<image :src="userInfoIntro.imgList[0]" mode=""></image>
					<view class="tit">
						您完成个人资料后才可以聊天呦～
					</view>
					<button type="default" @click="goSetInfo">点击设置个人资料</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRegisterStatus:false,
				alert: false,
				userInfoIntro: {},
				womenImg: '../../static/woman.png',
				manImg: '../../static/man.png',
				token:'',
				user_id :'',
				like:'../../static/like.png',
				nolike:'../../static/nolike.png',
				requestStatus:false
			}
		},
		onLoad(options) {
			let userInfo = uni.getStorageSync("UserInfo");
			let {
				token,
				uid
			} = userInfo;
			this.token = token;
			this.user_id = uid;
			let {
				id
			} = options
			this.getUsersInfo(id)
			this.getUsersInfo(this.user_id)
		},
		methods: {
			getUsersInfo(id) {
				uni.showLoading({title:'正在加载中'})
				let h = {
					user_id: id
				}
				this.$api.users_get(h).then((res) => {
						let userInfoIntro = res.data.data[0]
						if (userInfoIntro) {
							if(userInfoIntro.user_id==this.user_id){
								this.isRegisterStatus = true
							}
							userInfoIntro.age = this.jsGetAge(userInfoIntro.birth)
							let likeme = false
							if(userInfoIntro.likemeList&&userInfoIntro.likemeList.indexOf(this.user_id)!==-1){
								likeme = true
							}
							userInfoIntro.likeme = likeme
							this.userInfoIntro = userInfoIntro	
							this.requestStatus = true
						}
					})
					.catch((res) => {
						console.log(res, 'pppppppp')
						this.requestStatus = true
					})
				uni.hideLoading()
			},
			jsGetAge(strBirthday) {
				var returnAge;
				var strBirthdayArr = strBirthday.split("-");
				var birthYear = strBirthdayArr[0];
				var birthMonth = strBirthdayArr[1];
				var birthDay = strBirthdayArr[2];
				let d = new Date();
				var nowYear = d.getFullYear();
				var nowMonth = d.getMonth() + 1;
				var nowDay = d.getDate();
				if (nowYear == birthYear) {
					returnAge = 0; //同年 则为0岁  
				} else {
					var ageDiff = nowYear - birthYear; //年之差  
					if (ageDiff > 0) {
						if (nowMonth == birthMonth) {
							var dayDiff = nowDay - birthDay; //日之差  
							if (dayDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						} else {
							var monthDiff = nowMonth - birthMonth; //月之差  
							if (monthDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						}
					} else {
						returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天  
					}
				}
				return returnAge; //返回周岁年龄    
			},
			goSetInfo(){
				uni.navigateTo({
					url:'/pages/editInfo/editInfo'
					})
			},
			async goLike(options) {
				let author_id = options;
				let user_id = this.user_id;
				let token = this.token
				var result = await this.$http("/api/checktoken", {}, "GET", token).catch(err => {
					return;
				})
				if (result.data.code == 403) {
					uni.showLoading({
						title: '请先登录'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/send/send'
						})
					}, 1500)
				} else {
					uni.showLoading()
					this.$api.likeme({
						author_id: author_id,
						user_id: user_id
					}).then(res => {
						uni.hideLoading()
						this.userInfoIntro.likeme = !this.userInfoIntro.likeme
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
					})

				}
				uni.hideLoading()
			},
		}
	}
</script>

<style>
	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.content .like {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		background-color: #fff;
		position: fixed;
		bottom: 210rpx;
		right: 32rpx;
		box-shadow: 0px 0px 15px #f3eaeb;
	}

	.content .like image {
		width: 64rpx;
		height: 56rpx;
		margin-left: 23rpx;
		margin-top: 27rpx;
	}

	.top {
		padding: 31rpx;
		border-bottom: 6rpx solid #eceeed;
	}

	.top .pic .swiper {
		width: 688rpx;
		height: 688rpx;
	}

	.top .pic image {
		width: 688rpx;
		height: 688rpx;
		border-radius: 30rpx;
	}

	.top .info {
		overflow: hidden;
	}

	.top .info .name {
		font-weight: bold;
		font-size: 30rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		display: inline-block;
	}

	.top .info image {
		width: 39rpx;
		height: 39rpx;
		margin-left: 5rpx;
		margin-top: 23rpx;
		border-radius: 4rpx;
		vertical-align: top;
		display: inline-block;
	}

	.top .info .location {
		font-size: 24rpx;
		color: #a8a8a8;
		margin-top: 31rpx;
	}

	.middle .item .title {
		font-size: 30rpx;
		line-height: 42rpx;
		margin: 21rpx 0;
		padding-left: 31rpx;
		border-left: 7rpx solid #ff7a59;
	}

	.middle .item .content {
		padding: 0 31rpx 31rpx 31rpx;
		padding-bottom: 31rpx;
		overflow: hidden;
	}

	.middle .item .content .item {
		font-size: 26rpx;
		padding: 8rpx 30rpx;
		margin: 10rpx 28rpx 10rpx 0;
		float: left;
		border: 3rpx solid #dacbce;
		border-radius: 40rpx;
	}

	.middle .item .content .intro {
		font-size: 30rpx;
		line-height: 46rpx;
		padding: 16rpx;
		border-radius: 5px;
		background-color: #f8f8fa;
	}

	uni-button,
	.button-hover {
		border: none;
		border-radius: 0px;
		background-color: #f25d57;
		color: #fff;
	}

	.alert {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.alert .box {
		width: 560rpx;
		height: 385rpx;
		background-color: #fff;
		margin: 370rpx auto;
		border-radius: 20rpx;
		position: relative;
	}

	.alert .box image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: absolute;
		left: 280rpx;
		top: -75rpx;
		margin-left: -75rpx;
		border: 5rpx solid #fff;
	}

	.alert .box .tit {
		width: 210rpx;
		font-size: 26rpx;
		line-height: 44rpx;
		text-align: center;
		margin: 108rpx auto;
		margin-bottom: 43rpx;
		padding-left: 191rpx;
		display: inline-block;
	}

	.alert .box button {
		margin: 0 77rpx;
		border-radius: 44rpx;
	}
</style>
